<template>
    <el-menu class="el-menu-vertical-demo full-height asideMenu-border" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
        router>
        <template v-for='item in menuList'>
            <el-submenu :index="item.index">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>
                </template>
                <el-menu-item :index="item2.index" @click='addMenuTags(item2.index,item2.name)' v-for='item2 in item.list'>{{item2.name}}</el-menu-item>
            </el-submenu>
        </template>
    </el-menu>
</template>


<script>
    export default {
        name: 'asideMenu',
        props: {
            isCollapse: [Boolean]
        },
        data() {
            return {
                menuList: new Array()
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            addMenuTags(index, name) {
                var tag = {};
                tag.key = index;
                tag.name = name;
                this.$store.commit('menutags/addMenuTags', tag);
            }

        },
        created() {
            console.log('created');
            var menuList = [{
                index: '/view',
                name: '菜单',
                list: [
                    {
                        index: '/view/listPage',
                        name: '分页表格',
                    }, {
                        index: '/view/formPage',
                        name: '表单',
                    }, {
                        index: '/view/draggablePage',
                        name: '拖拽',
                    }
                ]
            }];

            this.menuList = menuList;

        },
    }
</script>


<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {

        width: 200px;
        min-height: 400px;
    }

    .el-menu-vertical-demo {
        width: 55px;
    }
</style>